<template>
  <div class="home-container">
    <!-- 顶部导航栏 -->
    <!-- placeholder 生成等高盒子，避免遮挡下方标准流 -->
    <van-nav-bar fixed placeholder>
      <!-- 左边插槽 -->
      <template #left>
        <div class="logo"></div>
      </template>
      <!-- 右边插槽 -->
      <template #right>
        <van-button round class="search-btn" size="small" icon="search"
        @click="$router.push('/search')"
          >搜索</van-button
        >
      </template>
    </van-nav-bar>
    <!-- 横向滚动条 tab栏 -->
    <van-tabs v-model="active" @click="tabClick">
      <!-- 3.渲染数据 -->
      <van-tab v-for="item in channels" :key="item.id" :title="item.name">
        <!-- 下拉刷新 -->
        <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
          <!-- 上拉刷新 -->
          <van-list
            v-model="loading"
            :finished="finished"
            finished-text="别拉了,木有啦!"
            @load="onLoad"
          >
            <van-cell
              v-for="item in list"
              :key="item.art_id"
              :title="item.title"
              @click="$router.push({path:'/article',query:{id:item.art_id}})"
            >
            <!-- 使用插槽 -->
              <template #label>
                <div>
                  <van-grid :border="false" :column-num="item.cover.type">
                    <van-grid-item
                      v-for="(value, index) in item.cover.images"
                      :key="index"
                    >
                    <!-- lazy-load 图片懒加载 -->
                      <van-image :src="value" lazy-load />
                    </van-grid-item>
                  </van-grid>
                </div>
                <span>{{ item.aut_name }}</span
                >&nbsp; <span>{{ item.comm_count }}</span
                >&nbsp;
                <span>{{ item.pubdate | fromNow }}</span>
              </template>
            </van-cell>
          </van-list>
        </van-pull-refresh>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
// 导入接口
import { getChannelsList, getArticleList } from "./home.js";
// 导入moment
import moment from "moment";
// 设置moment语言
moment.locale("zh-cn");

export default {
  name: "home",
  data() {
    return {
      active: 0, //tab栏
      channels: [], //频道管理
      list: [], //列表数据
      loading: false, //上拉 加载更多动画
      finished: false, //上拉 加载全部数据开关
      isLoading: false, //下拉 刷新动画
      timestamp: null, // 默认不给值，发请求的时候获取当前时间戳就可以了
    };
  },
  async created() {
    // 1.加载频道列表
    let res = await getChannelsList();
    //  console.log(res);
    // 2.绑定数据
    this.channels = res.data.data.channels;
  },
  methods: {
    // 1.上拉加载更多
    async onLoad() {
      // 2.加载文章列表
      // 2.1判断是不是第一项
      if (!this.timestamp) {
        this.timestamp = Date.now();
      }
      // 2.2请求数据
      let res = await getArticleList({
        channel_id: this.channels[this.active].id,
        timestamp: this.timestamp,
      });
      // 2.3绑定数据
      this.timestamp = res.data.data.pre_timestamp;
      this.list.push(...res.data.data.results);

      // 2.4加载状态结束,关闭加载动画
      this.loading = false;

      //2.5.数据全部加载完成，最多50条，如果所有元素加载完毕，则停止滚动
      if (this.list.length >= 50) {
        this.finished = true;
      }
    },
    onRefresh() {
      // 清空时间戳，作用是下拉刷新之后从第一页开始请求
      this.timestamp = null;
      // 0.一旦下拉刷新，无条件修改上拉列表finished为false
      // 如果不写这行代码：一旦拉到底部，再下拉刷新就无法请求第二页的数据了
      this.finished = false;
      // 1.清空当前数据
      this.list = [];
      // 2.重新加载数据
      // 如果不写这行代码，就无法看到底部加载第二页动画
      this.loading = true;
      this.onLoad();
      // 3.关闭下拉刷新动画，否者顶部动画会一直转圈
      this.isLoading = false;
    },
    // tab栏点击
    tabClick() {
      this.onRefresh();
    },
    
  },
  filters: {
      fromNow(value) {
        return moment(value).fromNow();
      },
    },
};
</script>

<style lang="less">
.home-container {
  // 顶部栏
  .van-nav-bar {
    z-index: 2 !important;
    .van-nav-bar__content {
      background-color: #0099fa;
      //左边logo
      .logo {
        /* 注意点
      如果在图片路径中使用@，默认前面会有./(./@/image.png) 导致编译器报错
      解决： 在@前面添加~ (去掉默认./)
      */
        background: url("~@/assets/logo.png") no-repeat;
        background-size: cover;
        width: 100px;
        height: 30px;
      }

      // 搜索按钮
      .search-btn {
        background-color: #5babfb;
        width: 100px;
        font-size: 14px;
        border: 1px solid transparent;
        .van-icon {
          color: #fff;
        }
        .van-button__text {
          color: #fff;
        }
      }
    }
  }

  /* 2.tab栏布局 */
  .van-tabs {
    /* 2.1 头部tab栏 */
    .van-tabs__wrap {
      position: fixed;
      /* 解决频道列表不能自动滚动bug
    当频道列表数据很多的时候会被内容撑开，导致无法自动滚动。给一个宽度即可
    */
      width: 100%;
      top: 46px;
      // 添加层级避免被覆盖
      z-index: 10;
      .van-tabs__line {
        background-color: #5babfb;
      }
    }

    /* 2.2 内容 */
    .van-tabs__content {
      /* 设置列表栏的上margin,避免被导航栏与tab栏遮挡(固定定位导致脱标) */
      margin-top: 44px;
    }
  }
}
</style>
